<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>ERROR-INFO</title>
		<meta name="keywords" content="ERROR-INFO">
		<meta name="description" content="ERROR-INFO">

		<link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="../css/animate.css" rel="stylesheet">
		<link href="../css/style.css?v=4.1.0" rel="stylesheet">

		<!-- 表格 -->
		<link href="../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
	</head>

	<body class="gray-bg" >
		<div class="wrapper wrapper-content animated fadeInRight">
			<form class="form-horizontal m-t">
				<div class="form-group">
					
					<div class="col-sm-3" align="middle">
						<select id="center_chosen" class="form-control m-b" style="width: 200px;" onchange="centerChange()">

						</select> 
					</div>

					

					<div class="col-sm-2" align="middle">
						<select id="timeScope" class="form-control m-b" style="width: 150px;" onclick="appChange()">
							<option>2天</option>
							<option>1天</option>
							<option>12小时</option>
							<option>6小时</option>
							<option>3小时</option>
							<option>1小时</option>
							<option>20分钟</option>
							<option>5分钟</option>

						</select>
					</div>
					
					<div class="col-sm-3" align="middle">
						<input class="form-control layer-date" id="endTime" placeholder="开始日期" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss',choose:checkDate});">
					</div>

					<div class="col-sm-2" align="middle">
						<select id="limit" class="form-control m-b" style="width: 200px;" onclick="appChange()">
							<option>请选择显示条数...</option>
							<option>100</option>
							<option>200</option>
							<option>500</option>
							<option>1000</option>
							<option>2000</option>
							<option>5000</option>
							<option>10000</option>

						</select>
					</div>

					<div class="col-sm-2" align="middle">
						<button type="button" class="btn btn-primary btn-sm" onclick="tableShow()">搜索</button>
					</div>
				</div>
			</form>

			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5><i class="fa fa-table"></i> 异常简览</h5>
							<div class="ibox-tools">
								<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
								</a>
								<a class="dropdown-toggle" data-toggle="dropdown" href="rpc_list.html#"> <i class="fa fa-wrench"></i>
								</a>
								<ul class="dropdown-menu dropdown-user">
									<li>
										<a href="rpc_list.html#">选项1</a>
									</li>
									<li>
										<a href="rpc_list.html#">选项2</a>
									</li>
								</ul>

							</div>
						</div>
						<div class="ibox-content">
							<table id="agentInfo_tb" class="table table-striped table-bordered table-hover dataTables-example">
							</table>
						</div>

					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5><i class="fa fa-table"></i> 异常列表 </h5>
							<div class="ibox-tools">
								<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
								</a>
								<a class="dropdown-toggle" data-toggle="dropdown" href="rpc_list.html#"> <i class="fa fa-wrench"></i>
								</a>
								<ul class="dropdown-menu dropdown-user">
									<li>
										<a href="rpc_list.html#">选项1</a>
									</li>
									<li>
										<a href="rpc_list.html#">选项2</a>
									</li>
								</ul>

							</div>
						</div>
						<div class="ibox-content">
							<table id="rpc_tb" class="table table-striped table-bordered table-hover dataTables-example">
							</table>
						</div>

					</div>
				</div>
			</div>

		</div>

		<!-- 全局js -->
		<script src="../js/jquery.min.js?v=2.1.4"></script>
		<script src="../js/bootstrap.min.js?v=3.3.6"></script>

		<!-- 表格 -->
		<script src="../js/plugins/dataTables/jquery.dataTables.js"></script>
		<script src="../js/plugins/dataTables/dataTables.bootstrap.js"></script>

		<!-- 自定义js -->
		<script src="../js/content.js?v=1.0.0"></script>
		<script src="../js/jquery.i18n.properties-min-1.0.9.js"></script>

		<!-- 时间框 -->
		<script src="../js/plugins/layer/laydate/laydate.js"></script>
		<script src="../js/mine/time.js"></script>
		<!--	<script src="../js/app.js"></script>-->
		<script src="../js/angular.js"></script>
		<script src="../js/server-map-dao.service.js"></script>

		<script>
			var startTime;
			var startTimestamp;
			var timeScope;
			var endTimestamp;
			var limit;
			var center;
			var centerInfoList;
			
//			var preUrl = "http://127.0.0.1:8041";
//			var preUrl = "http://10.145.196.107:8041";
			var preUrl = getUrl();
			
			function findAppNameByAgentId(agentId){
				var appName;
				$.each(centerInfoList, function(i, centerInfo) {
					if(centerInfo.agentId == agentId) {
						appName = centerInfo.applicationType.applicationName;
					}
					

				});
				return appName;
			}
			
			function findCenterNameByAgentId(agentId){
				var centerName;
				$.each(centerInfoList, function(i, centerInfo) {
					if(centerInfo.agentId == agentId) {
						centerName = centerInfo.center;
					}
					

				});
				return centerName;
			}
			
			function findAppTypeByAgentId(agentId){
				var appType;
				$.each(centerInfoList, function(i, centerInfo) {
					if(centerInfo.agentId == agentId) {
						appType = centerInfo.applicationType.type;
					}
					

				});
				return appType;
			}
			
			function serviceNameToCHN(service){
				var serviceName = "";
				if(service == "biz"){
					serviceName = "业务服务";
				}else if(service == "data"){
					serviceName = "数据服务";
				}else if(service == "shared"){
					serviceName = "共享服务";
				}else{
					serviceName = "未知服务";
				}
				return serviceName;
				
			}
			
			/*function centerNameToCHN(center){
				var centerName = "";
				if(center == "ordercenter"){
					centerName = "受理引擎";
				}else if(center == "custcenter"){
					centerName = "客户引擎";
				}else if(center == "cpccenter"){
					centerName = "CPC配置引擎";
				}else if(center == "msc"){
					centerName = "营服协同引擎";
				}else{
					centerName = "未知引擎";
				}
				return centerName;
				
			}*/
			
			function  centerNameToCHN(center){  
				var centerName = "";
			    jQuery.i18n.properties({// 加载properties文件  
			    name:'centerAndType', // properties文件名称  
			    path:'../properties/', // properties文件路径  
			    mode:'map', // 用 Map 的方式使用资源文件中的值  
			    callback: function() {// 加载成功后设置显示内容  
//			        alert($.i18n.prop(center));//其中isp_index为properties文件中需要查找到的数据的key值  
			    	centerName = $.i18n.prop(center);
			    	
			    	
			    }
			    });
			    if(centerName.substring(0,1) == "["){
			    	centerName = "未知引擎";
			    }
			   
			    return centerName;
			} 
			function  getUrl(){  
				var url = "";
			    jQuery.i18n.properties({// 加载properties文件  
			    name:'ipAndPort', // properties文件名称  
			    path:'../properties/', // properties文件路径  
			    mode:'map', // 用 Map 的方式使用资源文件中的值  
			    callback: function() {// 加载成功后设置显示内容  
//			       //其中isp_index为properties文件中需要查找到的数据的key值  
			    	url = $.i18n.prop("url");
			    	
			    	
			    }
			    });
			    
			   
			    return url;
			} 
			
			
			
			function centerChosen() {
				$.get(preUrl + "/centers", {},
					//				$.get("http://localhost:8041/applications", {},
					function(data) {
						$("#center_chosen").append($("<option>请选择中心...</option>"));
						//						var data_selector = JSON.parse(rs);
						$.each(data, function(i, item) {
							$("#center_chosen").append($("<option value='"+ item+"'>" + centerNameToCHN(item) + "</option>"));
						});
					});
			}

			function setCookie(cname, cvalue, exdays) {
				var d = new Date();
				d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
				var expires = "expires=" + d.toGMTString();
				document.cookie = cname + "=" + cvalue + "; " + expires;
			}

			function getCookie(cname) {
				var name = cname + "=";
				var ca = document.cookie.split(';');
				for(var i = 0; i < ca.length; i++) {
					var c = ca[i].trim();
					if(c.indexOf(name) == 0) {
						return c.substring(name.length, c.length);
					}
				}
				return "";
			}

			function getStartTime(timeScope, endTimestamp) {

				if(timeScope.indexOf("天") > 0) {
					var day = timeScope.substr(0, timeScope.indexOf("天"));
					return endTimestamp - 86400000 * day;
				} else if(timeScope.indexOf("小时") > 0) {
					var hour = timeScope.substr(0, timeScope.indexOf("小时"));
					return endTimestamp - 3600000 * hour;
				} else if(timeScope.indexOf("分钟") > 0) {
					var min = timeScope.substr(0, timeScope.indexOf("分钟"));
					return endTimestamp - 60000 * min;
				}

			}

			var rpcListFlag = false;

			function exceptionList(agentId) {
				
//				$.get("http://localhost:8041/exceptionList", {

				$.get(preUrl + "/exceptionList", {
						startTimestamp: startTimestamp,
						endTimestamp: endTimestamp,
						agentId: agentId
					},
					function(data) {
//						console.log(JSON.stringify(data));

						if(rpcListFlag) {
							$("#rpc_tb").dataTable().fnDestroy();
						}

						$("#rpc_tb").empty();
						$("#rpc_tb").append($("<thead><tr><th>序号</th><th>开始时间</th><th>RPC请求</th><th>是否异常</th><th>请求耗时(ms)</th><th>实例名</th><th>客户端IP</th><th>事务唯一标识</th></tr></thead><tbody>"));
						$.each(data, function(i, item) {
//							console.log(JSON.stringify(data));
							var exceptionFlag = false;
							var startTime = getFormatDate(data[i].startTime);
							$.each(data[i].spanEventBoList, function(j, spanEventBo) {
								if(spanEventBo.exceptionId != 0) {
									exceptionFlag = true;
								}

							});

							if(exceptionFlag) {

								if(data[i].elapsed < 1000) {
									td = $("<tr onmouseover=\"this.style.background='White'\" onmouseout=\"this.style.background='#FFD2D2'\" class='tr' style='background-color: #FFD2D2;' onClick=\"location.href='trans_info.html?exceptionFlag=" + exceptionFlag + "&traceId=" + data[i].transactionId.agentId + '%5E' + data[i].transactionId.agentStartTime + '%5E' + data[i].transactionId.transactionSequence + "&focusTimestamp=" + data[i].spanEvenBoList.collectorAcceptTime +  "&agentId=" + data[i].agentId + "&spanId=" + data[i].spanId + "&mRpc=" + data[i].rpc + "'\"><td>" + (i + 1) +
										"<td><i class='fa fa-clock-o'></i> " + getFormatDate(data[i].startTime) +
										"<td>" + data[i].rpc +
										"</td><td>异常</td><td class='text-navy'>" + data[i].elapsed +
										"</td><td>" + data[i].agentId +
										"</td><td>" + data[i].remoteAddr +
										"</td><td>" + data[i].transactionId.agentId + '%5E' + data[i].transactionId.agentStartTime + '%5E' + data[i].transactionId.transactionSequence + "</td></tr>");
									$("#rpc_tb").append(td);
								} else if(data[i].elapsed > 5000) {
									td = $("<tr onmouseover=\"this.style.background='White'\" onmouseout=\"this.style.background='#FFD2D2'\" class='tr' style='background-color: #FFD2D2;' onClick=\"location.href='trans_info.html?exceptionFlag=" + exceptionFlag + "&traceId=" + data[i].transactionId.agentId + '%5E' + data[i].transactionId.agentStartTime + '%5E' + data[i].transactionId.transactionSequence + "&focusTimestamp=" + data[i].spanEvenBoList.collectorAcceptTime +  "&agentId=" + data[i].agentId + "&spanId=" + data[i].spanId + "&mRpc=" + data[i].rpc + "'\"><td>" + (i + 1) +
										"<td><i class='fa fa-clock-o'></i> " + getFormatDate(data[i].startTime) +
										"<td>" + data[i].rpc +
										"</td><td>异常</td><td class='text-danger'>" + data[i].elapsed +
										"</td><td>" + data[i].agentId +
										"</td><td>" + data[i].remoteAddr +
										"</td><td>" + data[i].transactionId.agentId + '%5E' + data[i].transactionId.agentStartTime + '%5E' + data[i].transactionId.transactionSequence + "</td></tr>");
									$("#rpc_tb").append(td);
								} else {
									td = $("<tr onmouseover=\"this.style.background='White'\" onmouseout=\"this.style.background='#FFD2D2'\" class='tr' style='background-color: #FFD2D2;' onClick=\"location.href='trans_info.html?exceptionFlag=" + exceptionFlag + "&traceId=" + data[i].transactionId.agentId + '%5E' + data[i].transactionId.agentStartTime + '%5E' + data[i].transactionId.transactionSequence + "&focusTimestamp=" + data[i].spanEvenBoList.collectorAcceptTime +  "&agentId=" + data[i].agentId + "&spanId=" + data[i].spanId + "&mRpc=" + data[i].rpc + "'\"><td>" + (i + 1) +
										"<td><i class='fa fa-clock-o'></i> " + getFormatDate(data[i].startTime) +
										"<td>" + data[i].rpc +
										"</td><td>异常</td><td class='text-warning'>" + data[i].elapsed +
										"</td><td>" + data[i].agentId +
										"</td><td>" + data[i].remoteAddr +
										"</td><td>" + data[i].transactionId.agentId + '%5E' + data[i].transactionId.agentStartTime + '%5E' + data[i].transactionId.transactionSequence + "</td></tr>");
									$("#rpc_tb").append(td);

								}

								/*td = $("<tr style='background-color: #FFD2D2;'><td>" + (i + 1) +
									"<td><i class='fa fa-clock-o'></i> " + getFormatDate(data[i].startTime) +
									"<td><a  href=\"trans_info.html?exceptionFlag=" + flag + "&traceId=" + data[i].transactionId.agentId + '%5E' + data[i].transactionId.agentStartTime + '%5E' + data[i].transactionId.transactionSequence + "&agentId=" + data[i].agentId + "&spanId=" + data[i].spanId + "&mRpc=" + data[i].rpc + "\">" + data[i].rpc +

									//								"<td><a onclick='info("+ flag +"," + data[i].transactionId.agentId + '-' + data[i].transactionId.agentStartTime + '-' + data[i].transactionId.transactionSequence + "," + data[i].agentId + "," + data[i].spanId + ",'" + data[i].rpc + "')'>" + data[i].rpc +

									"</a></td><td class='text-danger'><a onclick='test()'>异常</a></td><td class='text-navy'>" + data[i].elapsed +
									"ms</td><td>" + data[i].agentId +
									"</td><td>" + data[i].remoteAddr +
									"</td><td>" + data[i].transactionId.agentId + '%5E' + data[i].transactionId.agentStartTime + '%5E' + data[i].transactionId.transactionSequence + "</td></tr>");
								$("#rpc_tb").append(td);*/

							}

						});
						$('#rpc_tb').dataTable({ 
							"aoColumnDefs": [ { 
								"bSortable": false, "aTargets": [ 0,2,3,5,6,7 ] 
								
							}]
							});
	
						rpcListFlag = true;
					});

				setCookie("agentId", agentId, 30);
			}

			var agentListFlag = false;

			var flag = false;
			
			$(".tr").mouseover(function(){
				  this.css("background-color","yellow");
				});

			function checkDate() {
				flag = true;
			}

			function appChange() {
				cookieFlag = true;
			}

			function tableShow() {
				
			/*	
				center = $("#center_chosen").val();

					endTime = new Date($("#endTime").val());
					endTimestamp = Date.parse(new Date($("#endTime").val()));
					timeScope = $("#timeScope").val();
					startTimestamp = getStartTime(timeScope, endTimestamp);
					limit = 1000;*/

				//				var startDate = new Date($("#start").val());
				if(getCookie("startTimestamp") == "NaN") {
//					startTime = new Date($("#startTime").val());
//					startTimestamp = Date.parse(new Date($("#startTime").val()));
//					timeScope = $("#timeScope").val();
//					endTimestamp = getEndTime(timeScope, startTimestamp);
					center = $("#center_chosen").val();

					endTime = new Date($("#endTime").val());
					endTimestamp = Date.parse(new Date($("#endTime").val()));
					timeScope = $("#timeScope").val();
					startTimestamp = getStartTime(timeScope, endTimestamp);


					if($("#limit").val() == "请选择显示条数...") {
						limit = 1000;
					} else {
						limit = parseInt($("#limit").val());
					}
				}

				if(flag) {
					center = $("#center_chosen").val();
					endTime = new Date($("#endTime").val());
					endTimestamp = Date.parse(new Date($("#endTime").val()));
					timeScope = $("#timeScope").val();
					startTimestamp = getStartTime(timeScope, endTimestamp);
					
					if($("#limit").val() == "请选择显示条数...") {
						limit = 1000;
					} else {
						limit = parseInt($("#limit").val());
					}
				}
				
				var lastUrl;
				if(center == "请选择中心..."){
					lastUrl = "/getAgentInfoByTimeScope2";
				}else{
					lastUrl = "/getAgentInfoByTimeScope1";
				}
			
				$("#rpc_tb").empty();

//				$.get("http://localhost:8041/getAgentInfoByTimeScope", {
				$.get(preUrl + lastUrl, {
						center: center,
						startTimestamp: startTimestamp,
						endTimestamp: endTimestamp,
						limit: limit
					},
					function(obj) {
//						console.log(JSON.stringify(obj));
						centerInfoList = obj.CenterInfoList;
						
						
						
						var data = obj.StringMetaData;

						if(agentListFlag == true) {
							$("#agentInfo_tb").dataTable().fnDestroy();
						}

						$("#agentInfo_tb").empty();
						$("#agentInfo_tb").append($("<thead><tr><th>序号</th><th>实例名</th><th>服务名称</th><th>所属中心</th><th>服务类型</th><th>开始时间</th></tr></thead><tbody>"));
						$.each(data, function(i, item) {
							var agentId = item.agentId;
							td = $('<tr onclick="exceptionList(&quot;' + agentId + '&quot;)"><td>' + (i + 1) +
								'</td><td ><a href="#rpc_tb"  >' + data[i].agentId +
								"</a></td><td>" + findAppNameByAgentId(data[i].agentId) + "</td><td>" + centerNameToCHN(findCenterNameByAgentId(data[i].agentId)) + "</td><td>" + serviceNameToCHN(findAppTypeByAgentId(data[i].agentId)) + "</td><td><i class='fa fa-clock-o'></i> " + getFormatDate(data[i].startTime) +

								"</td></tr>");
							$("#agentInfo_tb").append(td);

						});
						$("#agentInfo_tb").append("</tbody>");
						$('#agentInfo_tb').dataTable();
						agentListFlag = true;

					});

				setCookie("startTimestamp", startTimestamp, 30);
				setCookie("endTimestamp", endTimestamp, 30);

				setCookie("limit", limit, 30);
				setCookie("center", center, 30);
			}

			window.onload = function() {
				centerChosen();
				
				$('#endTime').val((new Date()).format('yyyy-MM-dd hh:mm:ss'));
				
				if(getCookie("startTimestamp") != "") {
					
					center = getCookie("center");

					startTimestamp = getCookie("startTimestamp");

					endTimestamp = getCookie("endTimestamp");
					agentId = getCookie("agentId");
					limit = getCookie("limit");
					tableShow();
					exceptionList(agentId);
				}
			}
		</script>

	</body>

</html>